<template>
  <view class="template-wave" >

	<tn-nav-bar fixed alpha :isBack="true" >	
		我的申请	
	</tn-nav-bar>

    <view class="tn-padding-top-xs" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

	<!-- 底部tabbar start-->
		<view class=" footerfixed">
		<view class="tn-text-center" >
			<tn-tabs :list="scrollList" :itemWidth="150" :activeItemStyle="activeItemStyle" :current="current"
				@change="tabChange" :isScroll="false" activeColor="#5F4FD9" :bold="true" :fontSize="28">
			</tn-tabs>
		</view>
		
		</view>
		
		
	    <mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :style="{paddingTop: vuex_custom_bar_height+ 'px'}"> 
	 <!-- #ifdef MP -->
	 	<view  style="padding-bottom: 50px;padding-top:50px;">
	 	<!-- #endif -->
	 	<!-- #ifndef MP -->	
	 	<view  style="padding-bottom: 50px;">
	 <!-- #endif -->
	  <!-- 图标logo/头像 -->
	  <view v-for="(item, indexgift) in content" :key="indexgift"  class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin tn-bg-gray--light tn-padding">
	    <view class="justify-content-item" @click="navigateToFn({ url: '/circleMixinPages/blogger_other?id='+item.user_id, checkLogin: false })">
	      <view class="tn-flex tn-flex-col-center tn-flex-row-left">
	        <view class="logo-pic ">
	          <view class="logo-image">
	           <tn-avatar  shape="circle" :src="item.userAvatar" size="lg">
	           </tn-avatar>	 
	          </view>
	        </view>
	        <view class="tn-padding-right tn-color-black">
	          <view class="tn-padding-right tn-padding-left-sm  tn-text-bold tn-color-black">
	            {{item.nickname}}
	          </view>
			  
	          <view v-if="current==1" class="tn-padding-right tn-padding-top-xs tn-text-ellipsis tn-padding-left-sm tn-color-black">
	          <text v-if="item.status==4" class="tn-color-gray tn-text-sm">已过期，已退还{{configInfo.site_moneyname}}</text>
			   <text v-if="item.status==0" class="tn-color-gray tn-text-sm">申请已发出,等待对方查看</text>
	           <text v-if="item.status==1" class="tn-color-gray">已经成为好友，去聊天吧</text>
	           <text v-if="item.status==2" class="tn-color-gray">对方认为不合适</text>
	          </view>
	          <view v-if="current==0" class="tn-padding-right tn-padding-top-xs tn-text-ellipsis tn-padding-left-sm tn-color-black">
	          <text v-if="item.status==4" class="tn-color-gray tn-text-sm">已过期</text>
			   <text v-if="item.status==0" class="tn-color-gray tn-text-sm">收到申请，快去查看吧</text>
	           <text v-if="item.status==1" class="tn-color-gray">已经成为好友，去聊天吧</text>
	           <text v-if="item.status==2" class="tn-color-gray">你认为不合适</text>
	          </view>			  
			  <view class="tn-padding-right tn-padding-top-xs tn-text-ellipsis tn-padding-left-sm tn-color-black">
			   <text  class="tn-color-gray tn-text-sm">{{item.create_time}}</text>			 
			  </view>
	        </view>
	      </view>
	    </view>
		<view  class="justify-content-item tn-flex-row-center" @click="duqu(indexgift,item.user_id,item.id)">
		 
		 <tn-button backgroundColor="tn-main-gradient-purple" size="sm"  margin="10rpx 10rpx" >
		 	查看
		 </tn-button>
		</view>
		
	  </view> 
				</view>
	  </mescroll-body>
    </view>
		<login-fn :is-show-login="loginBoxFlag" @loginSuccessCallback="refreshFn" @close="closeGlobalLoginFn">
		</login-fn>	
		
		
		
	
	<tn-popup v-model="renshishow" width="80%" height="950rpx" mode="bottom" backgroundColor="#ffffff"
		:borderRadius="30" :closeBtn="false" :maskCloseable="true">
	
		<view class="  ">
			<view class="tn-flex tn-flex-row-left tn-margin-top tn-padding" @click="navigateToFn({ url: '/circleMixinPages/blogger_other?id='+body.id, checkLogin: false })">
				<view class="title justify-content-item">
					<tn-avatar class="" :src="body.avatar" size="lg" shape="circle">
					</tn-avatar>
				</view>
	
				<view class=" justify-content-item tn-margin-left  ">
					<view class="tn-flex tn-flex-row-between">
						<view class="title justify-content-item">{{body.nickname}}
							<text class="tn-icon-trophy-fill"
								style="color:rgb(85 170 0 /0.6);font-size:40rpx;margin:0 18rpx;"></text>
							<tn-tag v-if="body.is_renzheng" shape="circle" backgroundColor="tn-cool-bg-color-4"
								height="38rpx" width="120rpx">
								<text class="tn-icon-safe" style="font-size:24rpx;">已认证</text>
							</tn-tag>
						</view>
					</view>
	
					<view class="desc">
						<view class="zhuangtai">
							<image :src="calcImageSrc(body.zhuangtai_image)"
								style="width:60rpx;height:60rpx;margin-left: -40rpx;" mode="aspectFill">
							</image>
							<text class="tn-margin-left-sm">{{body.zhuangtai_title}}</text><text
								class="tn-icon-right"></text>
						</view>
						<tn-tag shape="circle" backgroundColor="tn-main-gradient-purple--light">
							{{body.hun}}
						</tn-tag>
					</view>
				</view>
				
			</view>
			<view class="tn-margin-left tn-padding-left tn-text-bold">
			留言
			</view>
			<view class="tn-margin tn-bg-gray--light tn-padding" style="border-radius: 10rpx;">
			<text class="tn-icon-topic" style="font-size: 22px;"></text>{{body.content}}
			</view>
			<view class=" tn-margin  tn-flex tn-flex-row-between" v-if="body.ok_timenum">
			<view class="justify-content-item" style="color: #5F4FD9;" v-if="body.status==1">同意申请</view>
			<view class="justify-content-item" style="color: #5F4FD9;" v-if="body.status==2">
			<view class=" ">
				你认为不合适
			</view>
			<view class="tn-color-gray">
			<text class="tn-icon-warning-fill tn-color-red"></text>{{body.content_jujue}}
			</view>
				
			</view>
			<view class="justify-content-item">{{body.ok_time}}</view>
			</view>	
			
			<view class=" tn-margin  tn-flex tn-flex-row-between" v-if="body.look_timenum&&body.status==0">
			<view class="justify-content-item" style="color: #5F4FD9;" >
				<view class=" " v-if="current==1">
					等待对方处理
				</view>
				<view class=" " v-if="current==0">
					等待我的处理
				</view>
				<view class="tn-color-gray" v-if="body.days>0&&body.status==0">
				<text class="tn-icon-warning-fill tn-color-red tn-text-sm"></text>{{body.days}}天后，申请自动过期
				</view>				
				</view>	
			</view>		

			<view class=" tn-margin  tn-flex tn-flex-row-between" v-if="body.status==4">
			<view class="justify-content-item" style="color: #5F4FD9;" >
				<view class=" " >
					申请已过期
				</view>			
				<view class="tn-color-gray" v-if="body.money_tui>0&&current==1">				
				<text class="tn-icon-warning-fill tn-color-red tn-text-sm"></text>
				<text >{{body.money_tui}}{{configInfo.site_moneyname}}已自动退还</text>
				</view>
				</view>	
			</view>				
			
			
			
			<view class=" tn-margin  tn-flex tn-flex-row-between" v-if="body.look_timenum">			
			<view class="justify-content-item" style="color: #5F4FD9;" v-if="current==1">对方查看了你的申请</view>
			<view class="justify-content-item" style="color: #5F4FD9;" v-if="current==0">你查看了对方的申请</view>
			<view class="justify-content-item">{{body.look_time}}</view>
	</view>		
			 
				
				
			<view class=" tn-margin  tn-flex tn-flex-row-between">
			<view class="justify-content-item" style="color: #5F4FD9;">发出申请，消耗{{body.money}}{{configInfo.site_moneyname}}</view>
			<view class="justify-content-item">{{body.create_time}}</view>
			</view>
		<block v-if="current==0&&body.status==0">
			<view class="tn-flex tn-flex-row-center tn-margin">
				<tn-button @click="chuli(body.id,body.reg_id,1)" shape="round"
					backgroundColor="tn-main-gradient-purplered--single"
				shadow fontBold>
					 同意申请
				</tn-button>			
			</view>
	<view class="tn-margin tn-bg-gray--light tn-padding" style="border-radius: 10rpx;">
		<textarea style="height:70rpx;" maxlength="100" placeholder="请输入拒绝原因" v-model="jujue_body"
			placeholder-style="color:#AAAAAA"></textarea>
			<tn-button @click="chuli(body.id,body.reg_id,2)" shape="round"
				backgroundColor="tn-main-gradient-aquablue--light"
				shadow fontBold >
				 拒绝申请
			</tn-button>
	</view>
	</block>
			<block v-if="body.status==1">
				<view class="tn-flex tn-flex-row-center tn-margin">
					<tn-button @click="navigateToFn({
					url: '/mineMixinPages/chat/talk?toid=' + body.id,
					checkLogin: true
				})" shape="round"
						backgroundColor="tn-main-gradient-purple--reverse"
					 shadow fontBold>
						<text class="tn-icon-comment" style="font-size: 18px;margin-right: 10px;"></text>
						已是好友，去聊天吧
					</tn-button>			
				</view>
			</block>
			<block v-if="current==0&&body.status==2">
				<view class="tn-flex tn-flex-row-center tn-margin">
					<tn-button @click="chuli(body.id,body.reg_id,1)" shape="round"
						backgroundColor="tn-main-gradient-purplered--single"
					 shadow fontBold>
						后悔了，我同意申请
					</tn-button>			
				</view>
			</block>
					<block v-if="current==1&&body.status==2">
						<view class="tn-flex tn-flex-row-center tn-margin tn-padding-top">
							<tn-button @click="zaicishow=true" shape="round"
								backgroundColor="tn-main-gradient-purple--reverse"
								 shadow fontBold>
								<text class="tn-icon-comment" style="font-size: 18px;margin-right: 10px;"></text>
								再次申请
							</tn-button>			
						</view>
					</block>
						
		<block v-if="current==1&&body.status==0">
			<view class="tn-flex tn-flex-row-center tn-margin">
				<tn-button @click="zhongzhishpow=true" shape="round"
					backgroundColor="#F4F4F4"
					 shadow fontBold >
					终止申请
				</tn-button>			
			</view>
		</block>				
						
						
						
						
		</view>
		<tn-modal width="80%" v-model="zhongzhishpow" backgroundColor="#ffffff" padding="30rpx 20rpx" :radius="25"
			title="设置" :showCloseBtn="false" :maskCloseable="true" :zoom="true" :custom="true">
		
			<view class="custom-modal-content tn-padding-sm ">
				<view class="  tn-margin-top  ">
					<view class=" tn-flex tn-flex-row-center " style="margin-top:20rpx;">
						<view class="tn-padding-xs tn-text-bold tn-text-lg">终止申请</view>
					</view>
					<view class=" tn-flex tn-flex-row-left " style="margin-top:20rpx;">
						<text
							class="tn-padding-xs">如果没有拒绝你，等一等又何妨。别放弃太快，停下来多想想通过后和TA聊什么话题才是正解~</text>
					</view>
					
				</view>
		
			
				<view class="tn-flex tn-flex-row-center tn-text-center tn-padding-top" >
					<tn-button   backgroundColor="#F4F4F4"
						fontColor="#5d5d5d" shape="round" @click="zhongzhishpow=false">
						取消
					</tn-button>
					<tn-button @click="del(body.reg_id)" style="margin-left: 10px;"  backgroundColor="tn-cool-bg-color-6"
						shape="round"> 
						确认解除
					</tn-button>
				</view>
		
			</view>
		</tn-modal>
		<tn-modal width="80%" v-model="zaicishow" backgroundColor="#ffffff" padding="30rpx 20rpx" :radius="25"
			title="设置" :showCloseBtn="false" :maskCloseable="true" :zoom="true" :custom="true">
		
			<view class="custom-modal-content tn-padding-sm ">
				<view class="  tn-margin-top  ">
					<view class=" tn-flex tn-flex-row-center " style="margin-top:20rpx;">
						<view class="tn-padding-xs tn-text-bold tn-text-lg">{{configInfo.site_moneyname}}消耗翻倍提示</view>
					</view>
					<view class=" tn-flex tn-flex-row-left " style="margin-top:20rpx;">
						<text
							class="tn-padding-xs">由于对方拒绝过你的申请，为避免过多打扰对方，此次申请{{configInfo.site_moneyname}}消耗将会翻倍。
							本次将从你账户扣除{{body.money*2}}{{configInfo.site_moneyname}}</text>
					</view>
					
				</view>
		
	
				<view class="tn-flex tn-flex-row-center tn-text-center tn-padding-top" >
					<tn-button   backgroundColor="#F4F4F4"
						fontColor="#5d5d5d" shape="round" @click="zaicishow=false,renshishow=true">
						取消
					</tn-button>
					<tn-button @click="buynum(body.id)" style="margin-left: 10px;"  backgroundColor="tn-cool-bg-color-6"
						shape="round"> 
						确定
					</tn-button>
				</view>
		
			</view>
		</tn-modal>
		
	</tn-popup>
		
		
		
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
  import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
  import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
  const sysinfo = uni.getSystemInfoSync()
  export default {
  	name: 'TemplateGroup',
  	mixins: [template_page_mixin,MescrollMixin],
  	components: {
  		MescrollBody
  	},
 
    data(){
      return {
		  zhongzhishpow:false,
		  zaicishow:false,
		  index:0,
		  jujue_body:'',
		  body:[],
		  renshishow:false,
		 current:0,
		  activeItemStyle: {
		  	fontSize: `28rpx`
		  },
		  scrollList: [{
		  		name: '收到的'
		  	},
		  	{
		  		name: '发出的',
		  	}
		  ],
		  type:0,
		  title:'',
		  user:[],
		  id:0,
		  screenHeight: sysinfo.screenHeight,
		  zhubo:false,
		  num:0,
		  loginBoxFlag:false,
		  content: []		  
	  }
    },
	onLoad(option) {
		let that=this
		uni.$off('setLoginBoxFlag');
		uni.$on('setLoginBoxFlag', loginBoxFlag => {
			that.loginBoxFlag = loginBoxFlag;
		});	
		
		if (option.type) {
				this.current =1
			}
		},
		methods: {	
			
			
			async del(id) {
				let that = this;	
					
					
				if (this.body.days<6){
					this.msg('24小时内不可终止')
					return
				}	
					
					
					
					
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/love/buyreglove_del',
					data: {
						id:id								
					}
				});		
				if (result.statusCode == 200) {
					this.zaicishow=false
					this.renshishow=false
					if (result.data.code == 200) {
						this.msg(result.data.msg)	
				this.content.splice(this.index, 1);					
					} else {				
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				}
			},
		async buynum(user_id) {
			let that = this;		
			let result = await that.$request({
				loading: 0,
				method: 'post',
				url: '/chat/love/buyreglove_egen',
				data: {
					user_id:user_id								
				}
			});		
			if (result.statusCode == 200) {
				this.zaicishow=false
				this.renshishow=false
				if (result.data.code == 200) {
					this.msg(result.data.msg)				
				   this.content[this.index].status=0;
				} else {				
					uni.showToast({
						icon: 'none',
						title: result.data.msg
					});
				}
			}
		},
		tabChange(index) {
			this.current = index
			this.mescroll.resetUpScroll()		
		},
		
		async duqu(index,user_id,id) {	
			
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/love/show_reglove',
					data: {
						user_id:user_id	,					
						id:id						
					}
				});				
				if (result.statusCode == 200) {
					this.index=index
					this.jujue_body=''
					if (result.data.code == 200) {
						this.renshishow=true
					 this.body=result.data.data		
					}
				}			
		},	
		
	async chuli(user_id,id,status) {	
			let that = this;
				if (status==2&&!this.jujue_body){
					this.msg('请输入拒绝原因')
					return
				}
			let result = await that.$request({
				loading: 0,
				method: 'post',
				url: '/chat/love/chane_reglove',
				data: {
					user_id:user_id,
					id:id,
					content_jujue:this.jujue_body,
					status:status
				}
			});				
			if (result.statusCode == 200) {
				if (result.data.code == 200) {						
				this.msg('处理成功')		
				this.renshishow=false				
				this.content[this.index].status=status;			
				}
			}			
	},	
		

		
		
		refreshFn(){
			
		},
		closeGlobalLoginFn(){
			this.loginBoxFlag = false;
		},
	
		/// 列表调用
		downCallback(mescroll) {
			mescroll.endSuccess();
			mescroll.resetUpScroll();
		},	
		
		
		async upCallback(mescroll) {
			let that = this;
			let result = await that.$request({
				loading: 1,
				method: 'post',
				url:'/chat/love/my_shenqing',
				data: {
					type:this.current,
					page: mescroll.num
				}
			});
			if (result.statusCode == 200) {
				if (result.data.code == 200) {
					
				if (mescroll.num == 1) {			
					that.content = result.data.data.data;
				} else {
					that.content = that.content.concat(result.data.data.data);
				}
				mescroll.endSuccess(result.data.data.data.length,result.data.data.data.length >= mescroll.size);	
								
				} else {
					uni.showToast({
						icon: 'none',
						title: result.data.msg
					});
				}
			} else {
				uni.showToast({
					icon: 'none',
					title: that.$errorMsg
				});
			}
		},
		
      sendmsg(){
		if (this.num==''){
			this.msg('请输入房号')
		}  
		
		this.navigateToFn({ url: '/mineMixinPages/chat/room?id='+this.num, checkLogin: true })
		  
	  }
    }
  }
</script>

<style lang="scss" scoped>

  .template-wave{

  }
  
  /* 底部悬浮按钮 start*/
  .tn-tabbar-height {
  	min-height: 100rpx;
  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
  }
  .tn-footerfixed {
  	  bottom: 100px;
  	  right: 0;	  
    position: fixed;
    width: 100%;  
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);    
  }
  .tn-footerfixeddd {
  	  bottom: 150px;
  	  right: 0;	  
    position: fixed;
    width: 100%; 
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
  }
  /* 底部悬浮按钮 end*/
  
	input::placeholder{
		color:#DD5A5D;
		margin-top: 5px;
	}     
  @keyframes move_wave {
      0% {
          transform: translateX(0) translateZ(0) scaleY(1)
      }
      50% {
          transform: translateX(-25%) translateZ(0) scaleY(1)
      }
      100% {
          transform: translateX(-50%) translateZ(0) scaleY(1)
      }
  }
  .tnwave {
      overflow: hidden;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
  }
  .tn-icon-voice-fill{
	     animation: msClock 1.2s linear infinite; 
    // animation: move 1.2s linear infinite;
    // -webkit-animation: move 1.2s linear infinite;
    // display: inline-block;
  }
   @keyframes msClock{ 
          0%,90%,100%{ transform: rotate(0) scale(1);}
          20%,40%{ transform: rotate(-15deg) scale(1.2);}
          30%,50%{ transform: rotate(15deg) scale(1.3);}
      }
  @keyframes move {
    100% {
      transform: rotate(360deg);
    }
  }

  .waveWrapperInner {
      position: absolute;
      width: 100%;
      overflow: hidden;
      height: 100%;
  }
  .wave {
      position: absolute;
      left: 0;
      width: 200%;
      height: 100%;
      background-repeat: repeat no-repeat;
      background-position: 0 bottom;
      transform-origin: center bottom;
  }
  
  .bgTop {
      opacity: 0.4;
  }
  .waveTop {
      background-size: 50% 45px;
  }
  .waveAnimation .waveTop {
    animation: move_wave 4s linear infinite;
  }
  
  .bgMiddle {
      opacity: 0.6;
  }
  .waveMiddle {
      background-size: 50% 40px;
  }
  .waveAnimation .waveMiddle {
      animation: move_wave 3.5s linear infinite;
  }
  
  .bgBottom {
      opacity: 0.95;
  }
  .waveBottom {
      background-size: 50% 35px;
  }
  .waveAnimation .waveBottom {
      animation: move_wave 2s linear infinite;
  }
  
  
  /* 业务展示 start */
  .tn-info {
    
    &__container {
      margin-top: 10rpx;
      margin-bottom: 50rpx;
    }
    
    &__item {
      width: 48%;
      margin: 15rpx 0rpx;
      padding: 40rpx 30rpx;
      border-radius: 15rpx;
      
  
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
       
        }
      
      &__left {
        
        &--icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 30%;
          font-size: 50rpx;
          margin-right: 20rpx;
          position: relative;
          z-index: 1;
          
          &::after {
            content: " ";
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            left: 0;
            bottom: 0;
            border-radius: inherit;
            opacity: 1;
            transform: scale(1, 1);
            background-size: 100% 100%;
            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
          }
        }
        
        &__content {
          font-size: 30rpx;
          
          &--data {
            margin-top: 5rpx;
            font-weight: bold;
          }
        }
      }
      
      &__right {
        &--icon {
          position: absolute;
          right: 0upx;
          top: 50upx;
          font-size: 100upx;
          width: 108upx;
          height: 108upx;
          text-align: center;
          line-height: 60upx;
          opacity: 0.15;  
        }
      }
    }
  }
  /* 业务展示 end */
  .image-music{
    padding: 100rpx 0rpx;
    font-size: 16rpx;
    font-weight: 300;
    position: relative;
  }
  .image-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 10rpx 20rpx 0 0;
  }
  
  
  
  
  
  .dk-ban {
    
      border-radius: 0.3125rem;
      background-color: rgba(0, 0, 0, 0.6);
	   color: rgba(255, 255, 255, 0.8);
  }

.dk-bantext {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(216, 216, 216, 0.08);
    border-right: 0.0625rem solid rgba(255, 255, 255, 0.1);
    min-width: 7.3rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    cursor: pointer;
    padding: 0px 10px;
}
  
  //、输入框
.amount-input-box {
      position: relative;
      height: 30px;
  }
 .amount-input-currency-bg {
      border-radius: 4px 0 0 4px;
      background: #0d131d;
  }
.amount-input-currency {
      width: 52px;
      height: 28px;
      position: absolute;
      top: 1px;
      left: 1px;
      z-index: 99;
  }
 .amount-input-box .amount-input-currency-bg .currency-text {
      background: linear-gradient(282deg,#519fff 15.69%,#a25fff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
	  width: 42px;	 
		 font-size: 14px;
	      position: absolute;
	      top: 4px;
	      left: 10px;
	      text-align: left;
  }
  
.amount-input-box .input-value {
		width:100%;
	    height: 100%;
	    padding-left: 50px;
	    font-size: 14px;
	    font-weight: 600;
	    text-indent: 6px;
		border-radius: 4px;
	    transition: 0.5s ease-in-out;
		color: #ffffff;
      background-color: #0c0c0e;
      border: 1px solid rgba(170,175,201,0.8);  
      background-color: #040404;
      border: 1px solid transparent;
      background-image: linear-gradient(#040404,#040404),linear-gradient(282deg,#519fff 15.69%,#a25fff);
      background-origin: border-box;
      background-clip: content-box,border-box;
      box-shadow: 0px 0px 10px rgba(125,46,255,0.78);
  }
  //、、、、
  
  
  /* 底部tabbar start*/
  .footerfixed{
   position: fixed;
   width: 100%;
   top:50;
   z-index: 999;
   	background-color: #FFFFFF;
  }
  
  .tabbar {
    display: flex;
    align-items: center;
    min-height: 110rpx;
    justify-content: space-between;
  	padding: 0;
  	height: calc(110rpx + env(safe-area-inset-bottom) / 2);
  	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  }
  
  .tabbar .action {
  	font-size: 22rpx;
  	position: relative;
  	flex: 1;
  	text-align: center;
  	padding: 0;
  	display: block;
  	height: auto;
  	line-height: 1;
  	margin: 0;
  	overflow: initial;
  }
  
  .tabbar .action .bar-icon {
  	width: 100rpx;
  	position: relative;
  	display: block;
  	height: auto;
  	margin: 0 auto 10rpx;
  	text-align: center;
  	font-size: 42rpx;
  }
  
  .tabbar .action .bar-icon image {
  	width: 50rpx;
  	height: 50rpx;
  	display: inline-block;
  }
  
  
  
  
</style>
